<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/bootstrap-grid.css">
<link rel="stylesheet" href="/static/css/bootstrap-reboot.css">
<style>
    .row > div{
        padding: 15px 0;
    }
    .btn-primary{
        float: right;
    }
</style>
<body>
<div class="alert alert-warning alert-dismissible fade show"  id="alert" role="alert" style="display: none;z-index: 2;position: absolute;width: 100%;text-align: center">
    <strong>未登录，请登录</strong>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<!-- 登录模态框 -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                欢迎登录！！！
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="exampleInputEmail1">手机号</label>
                    <input type="email" class="form-control" id="username" aria-describedby="emailHelp">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密码</label>
                    <input type="password" class="form-control" id="password">
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-group form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">记住我</label>
                </div>
                <button type="submit" class="btn btn-primary" id="login">登录</button>
            </div>
        </div>
    </div>
</div>

<!-- 注册模态框  -->
<div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="registerModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                欢迎注册！！！
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="exampleInputEmail2">手机号</label>
                    <input type="email" class="form-control" id="username2" aria-describedby="emailHelp">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword2">密码</label>
                    <input type="password" class="form-control" id="password2">
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" id="register">注册</button>
            </div>
        </div>
    </div>
</div>
<div class="container" style="z-index: 1;position: relative">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled">Disabled</a>
                </li>
            </ul>
            <div class="form-inline">
                <input class="form-control" type="search" id="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" id="searchBtn" style="margin:0 10px ">Search</button>
<!--                <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="login">Login</button>-->
                <div id="loginRegister">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal" id="loginBtn">
                        登录
                    </button>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#registerModal" style="margin: 0 5px" id="registerBtn">
                        注册
                    </button>
                </div>
                <ul class="navbar-nav mr-auto" id="info">
                </ul>
            </div>
        </div>
    </nav>

    <!-- 轮播图 -->
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="http://images.sugoujx.com/upload/2023/vc16nso2941341y5ti1085.png" class="d-block w-100" height="300px" alt="...">
            </div>
            <div class="carousel-item">
                <img src="http://images.sugoujx.com/upload/2023/y1w66281049za441j2dl77.png" class="d-block w-100" height="300px" alt="...">
            </div>
            <div class="carousel-item">
                <img src="http://images.sugoujx.com/upload/2023/p16581bjrvf898s8m5lat5.png" class="d-block w-100" height="300px" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </button>
    </div>

    <div id="row" class="row" style="padding-left: 50px">
        {{range  .articleList}}
            <div class="col-sm">
                <div class="card" style="width: 18rem;">
                    <img src="{{.Image}}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">{{.Title}}</h5>
                        <p class="card-text">{{.Context}}</p>
                        <a id="detail" class="btn btn-primary">查看详情</a>
                        <div style="display: none">{{.Id}}</div>
                    </div>
                </div>
            </div>
        {{end}}
    </div>
</div>

<script src="/static/js/jquery.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/bootstrap.bundle.js"></script>
<script>
    var username        = getCookie("username")
    const info          = document.getElementById("info")
    const detail        = document.getElementById('detail')
    const loginRegister = document.getElementById('loginRegister')

    if(username){
        loginRegister.style.display = "none"
        info.innerHTML = "<li class=\"nav-item dropdown\">" +
            "<a class=\"nav-link dropdown-toggle\" href=\"#\" role=\"button\" data-toggle=\"dropdown\" aria-expanded=\"false\">" + username +"</a>" +
            " <div class=\"dropdown-menu\">" +
            "          <a class=\"dropdown-item\" href=\"#\" id=\"lout\">退出</a>" +
            "  </div>" +
            " </li>"
    }

    const row       =  document.getElementById("row")
    const searchBtn = document.getElementById("searchBtn")
    //搜索
    searchBtn.addEventListener("click", function () {
        row.innerHTML = "";
        // 发送POST请求到后端接口
        fetch("/search", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                title: document.getElementById('search').value,
            })
        })
            .then(response => response.json())
            .then(data => {
                var data = data.data;
                var html = "";
                for(var i=0;i<data.length;i++){
                    html += "  <div class=\"col-sm\">" +
                        "<div class=\"card\" style=\"width: 18rem;\">" +
                        "<img src=\""+data[i]['image']+"\" class=\"card-img-top\" alt=\"...\">" +
                        "<div class=\"card-body\">" +
                        "<h5 class=\"card-title\">"+data[i]['title']+"</h5>" +
                        "<p class=\"card-text\">"+data[i]['context']+"</p>" +
                        "<a id=\"detail\" class=\"btn btn-primary\">查看详情</a>" +
                        "<div style=\"display: none\">"+data[i]['id']+"</div>"+
                        "</div></div></div>";
                }
                //渲染
                row.innerHTML = html
            })
            .catch(error => {
                console.error("请求错误:", error);
            });
    });

    //详情
    detail.addEventListener("click", function () {
        // 发送POST请求到后端接口
        fetch("/v1/detail", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": getCookie("token")
            },
            body: JSON.stringify({
                id: "2",
            })
        })
            .then(response => response.json())
            .then(data => {
                alert(data.data.context)
            })
            .catch(error => {
                document.getElementById('alert').style.display= "block"
            });
    });

    //登录
    const login  = document.getElementById("login");
    login.addEventListener("click", function () {
        const username = document.getElementById('username').value
        // 发送POST请求到后端接口
        fetch("/login", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                username: username,
                password: document.getElementById('password').value,
            })
        })
            .then(response => response.json())
            .then(data => {
                if(data.token == ""){
                    alert(data.message)
                }else{
                    info.innerHTML = "<li class=\"nav-item dropdown\">" +
                        "<a class=\"nav-link dropdown-toggle\" href=\"#\" role=\"button\" data-toggle=\"dropdown\" aria-expanded=\"false\">" + data.username +"</a>" +
                        " <div class=\"dropdown-menu\">" +
                        "          <a class=\"dropdown-item\" href=\"#\" id=\"lout\">退出</a>" +
                        "  </div>" +
                        " </li>"
                    document.cookie = "token=" + data.token;
                    document.cookie = "username=" + username;
                    location.reload()
                }
            })
            .catch(error => {
                alert("出错了")
            });
    });

    //注册
    const register  = document.getElementById("register");
    register.addEventListener("click", function () {
        const username = document.getElementById('username2').value;
        // 发送POST请求到后端接口
        fetch("/register", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                username: username,
                password: document.getElementById('password2').value,
            })
        })
            .then(response => response.json())
            .then(data => {
                if(data.token == ""){
                    alert(data.message)
                }else{
                    info.innerHTML = "<li class=\"nav-item dropdown\">" +
                        "<a class=\"nav-link dropdown-toggle\" href=\"#\" role=\"button\" data-toggle=\"dropdown\" aria-expanded=\"false\">" + username +"</a>" +
                        " <div class=\"dropdown-menu\">" +
                        "          <a class=\"dropdown-item\" href=\"#\" id=\"lout\">退出</a>" +
                        "  </div>" +
                        " </li>"
                    document.cookie = "token=" + data.token;
                    document.cookie = "username=" + username;
                    location.reload()
                }
            })
            .catch(error => {
                var elements = document.querySelectorAll(".modal-backdrop");
                elements[0].style.display = "none";
                alert("出错了")
            });

    });

    //退出
    const lout  = document.getElementById("lout");
    lout.addEventListener("click", function () {
        console.log(21211);
        // 调用deleteCookie函数来清除名为"myCookie"的Cookie
        info.innerHTML = ""
        loginRegister.style.display = "block";
        deleteCookie("username");
        deleteCookie("token");

    });

    //获取cookie
    function getCookie(name) {
        var cookies = document.cookie.split('; ');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].split('=');
            if (cookie[0] === name) {
                return cookie[1];
            }
        }
        return "";
    }

    //删除cookie
    function deleteCookie(cookieName) {
        // 获取当前日期
        var currentDate = new Date();

        // 将Cookie的过期日期设置为过去的时间
        currentDate.setFullYear(currentDate.getFullYear() - 1);

        // 将Cookie过期日期设置为过去时间，这将导致浏览器自动删除Cookie
        document.cookie = cookieName + "=; expires=" + currentDate.toUTCString() + "; path=/";
    }


</script>
</body>
</html>